<template>
	<view class="shop-order-list">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">商家连锁</block>
		</cu-custom>

		<my-empty v-if="empty"></my-empty>

		<view class="cu-list menu-avatar margin-top-xs">
			<view class="cu-item" v-for="(item, i) in list" :key="i">
				<!-- <view class="cu-avatar round lg" :style="{'backgroundImage': 'url(' + (item.avatar || '/static/default_avatar.png') + ')'}"></view> -->
				<view class="content">
					<view class="text-grey"> ID:{{item.id}} {{item.title}}</view>
				</view>
				<view class="action">
					<!-- <view class="text-grey">UID: {{item.uid}}</view> -->
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-gradual-orange margin-tb-sm lg" @tap="addChain">添加商家</button>
		</view>
		
	</view>

</template>

<script>
	import shop from '@/api/shop.js';
	import MyShops from '@/components/MyShops';
	export default {
		data() {
			return {
				list: [],
				empty: false,
			}
		},
		components: {
			MyShops,
		},
		created() {
			this.loadData()
		},
		methods: {
			addChain(){
				uni.redirectTo({
					url:'/pages/my/shop/chain_add'
				})
			},
			loadData() {
				shop.chainList().then(res => {
					if (res.code === 1) {
						if (res.data.length <= 0) {
							this.empty = true;
							this.list = [];
						} else {
							this.empty = false;
							this.list = res.data;
						}
					} else {
						this.empty = true;
						this.list = [];
						this.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style>
	
	.cu-list.menu-avatar>.cu-item .content{
		left:13px;
	}
	
	.cu-list.menu-avatar>.cu-item .action{
		width:80px;
	}
</style>